html, body {
  height: calc(var(--vh, 1vh) * 100);
  overflow: hidden;
  overscroll-behavior: none;
}

body {
  background-color: rgb(2, 7, 14);
  background-image: url(images/ep_naturalblack_pattern.jpg);
}



/***********
 * Loading *
 ***********/

.loading-animation {
  animation: loading-rotator 2s linear infinite;
}


.loading-animation__circle {
  animation: loading-dash 1.5s ease-in-out infinite,
             loading-colors 6s ease-in-out infinite;
  stroke-dasharray: 1, 86.25;
  stroke-dashoffset: 0;
  transform-origin: center;
}


@keyframes loading-rotator {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}


@keyframes loading-colors {
  0% { stroke: rgb(248, 164, 167); }
  25% { stroke: rgb(254, 196, 24); }
  50% { stroke: rgb(72, 182, 133); }
  75% { stroke: rgb(6, 182, 239); }
  100% { stroke: rgb(248, 164, 167); }
}


@keyframes loading-dash {
  0% {
    stroke-dasharray: 1, 86.25;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 64.6875, 86.25;
    stroke-dashoffset: -21.5625;
  }
  100% {
    stroke-dasharray: 64.6875, 86.25;
    stroke-dashoffset: -86.25;
  }
}
